<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入echart库 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.0/dist/echarts.js"></script>
    <!-- 从官网主题编辑器引入主题 -->
    <script src="backgroud.js"></script>
    <style>
        #chart {        
            /* 给chart dom指定长宽 */
            width: 800px;
            height: 400px;
        }
    </style>
    
</head> 
<body>
    <div id="chart"></div>

    <script>
        
        
        const chartDom = document.getElementById('chart');  //获取dom
        //初始化 第二个参数为主题 官方默认提供light和dark模式 第三个参数渲染样式为svg 默认为canvas
        //canvas适合频繁更新 svg适合大屏显示
        const chart = echarts.init(chartDom);   
        chart.setOption({              //给dom指定标题
            title:{   
                text:'Echarts入门'      
            },
            xAxis:{
                type:'category'  //多坐标轴需要指定类型
            },            //x轴参数
            yAxis:[{},{
                splitLine:{
                    show:false
                }
            }],            //y轴参数
            dataset:{
                source: [
                    ['产品','2012','2013','2014','2015'],
                    ['奶茶',41,35,66,44,33],
                    ['被子',44,55,77,88,99]
                ]
            },
            series:[{             //数据和图片类型
                type: 'bar',     //柱状图
                seriesLayoutBy:'row',  //以行的形式来提数
                yAxisIndex:0          //柱状图对应的是第一个坐标系
            },{             //数据和图片类型
                type: 'line',     //折线图
                seriesLayoutBy:'row',  //以行的形式来提数
                yAxisIndex:1          //柱状图对应的是第一个坐标系
            }]                      
        });
    </script>
</body>
</html>